<script setup lang="ts">
import { ref } from 'vue';


const popupRef = ref()

const openPopup = ()=>{
  popupRef.value.open()
}

const closePopup = ()=>{
  popupRef.value.close()
}

const maskClick = ()=>{
  console.log('6666');
  popupRef.value.close()
}

const clickMe = (num1: number, e: any)=>{
  console.log(e);
}

</script>

<template>
  <view class="test-page">

    <view class="popup-demo">
      <button @click="openPopup" class="button" type="primary">
        打开弹层
      </button>
      <button @click="closePopup" class="button" type="primary">
        关闭弹层
      </button>
    </view>

    <uni-popup ref="popupRef" type="bottom" :is-mask-click="false" @click="maskClick">
      <view class="popup-container"></view>
    </uni-popup>

    <button type="primary" @click="clickMe(100, $event)">点我</button>
  </view>
</template>

<style scoped lang="scss">
.popup-demo {
  display: flex;
  justify-content: space-between;
  margin: 30rpx 0;

  .button {
    width: 300rpx;
    margin: 0;
  }
}

.popup-container {
  height: 400rpx;
  background-color: #fff;
}
</style>
